<template>
  <div id="app">
    <the-header/>
    <router-view class="music-content"/>
    <song-audio/>
    <play-bar/>
    <the-aside/>
    <scroll-top/>
    <TheFooter/>
  </div>
</template>

<script>
import TheHeader from './components/TheHeader'
import ScrollTop from './components/ScrollTop'
import TheFooter from './components/TheFooter'
import SongAudio from './components/SongAudio'
import PlayBar from './components/PlayBar'
import TheAside from './components/TheAside'
import {mapGetters} from 'vuex';
export default {
  name: 'App',
  components: {
    TheHeader,
    ScrollTop,
    TheFooter,
    SongAudio,
    PlayBar,
    TheAside
  },
  created(){
    this.$store.commit('setUrl','');
    this.$store.commit('setPicUrl','');
    this.$store.commit('setIsPlay',false);
    this.$store.commit('setTitle','');
    this.$store.commit('setArtist','');
  },
  computed: {
    ...mapGetters([
      'url',
      'listOfSongs'
    ]),
  }
}
</script>

<style  lang="scss" scoped>
@import './assets/css/app.scss';
</style>
